<template>
  <div class="coverimg-page">
    <div @click="openDialog" class="surface-plot">
      <img :src="value || surfacePlot" alt="">
    </div>
    <el-dialog
      title=""
      :append-to-body="true"
      :visible.sync="dialogVisible"
      width="50%">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="素材列表" name="material">
          <!-- 素材列表 -->
          <el-radio-group v-model="reqParams.collect" @change="changeCollect" size="small">
            <el-radio-button :label="false">全部</el-radio-button>
            <el-radio-button :label="true">收藏</el-radio-button>
          </el-radio-group>
          <ul class="item-list">
            <li class="item-img" :class="{ 'active': item.url === checkedImgUrl }" @click="activateImg(item)" v-for="item in imgList" :key="item.id">
              <img :src="item.url" alt="">
            </li>
          </ul>
          <el-pagination
            background
            @current-change="changePage"
            layout="prev, pager, next"
            :total="total">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="上传图片" name="uploadingImg">
          <!-- 上传图片 -->
          <el-upload
            class="avatar-uploader"
            name="image"
            :headers="imgHearders"
            action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
            :show-file-list="false"
            :on-success="updateSuccess">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmImg">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 自己手动去导入 webpack就会打包这张图片
import img from '@/assets/images/default.png'
// 文章相关接口
import { userImg } from '@/api/material'
export default {
  name: 'CoverImg',
  props: ['value'],
  data () {
    return {
      reqParams: {
        collect: false,
        page: 1,
        per_page: 8
      },
      dialogVisible: false,
      // tabs
      activeName: 'material',
      total: 0,
      // 素材列表
      imgList: [],
      // 判断是否被选中
      checkedImgUrl: null,
      // 封面图片
      surfacePlot: img,
      // 图片的预览地址
      imageUrl: '',
      // 上传图片的请求头
      imgHearders: {
        Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('myToken')).token
      }
    }
  },
  mounted () {
    this.getUserImg()
  },
  methods: {
    // 确定图片
    confirmImg () {
      if (this.activeName === 'material') {
        if (!this.checkedImgUrl) {
          this.$message.warning('请选择一个图片')
          return false
        } else {
          // this.surfacePlot = this.checkedImgUrl
          // 这里就需要通知父组件了
          this.$emit('input', this.checkedImgUrl)
        }
      }
      if (this.activeName === 'uploadingImg') {
        if (!this.imageUrl) {
          this.$message.warning('请上传一个图片')
          return false
        } else {
          // this.surfacePlot = this.imageUrl
          this.$emit('input', this.imageUrl)
        }
      }
      // 这个就是为了效验自定义事件
      this.$emit('on-confirm')
      this.dialogVisible = false
    },
    // 点击图片
    activateImg (item) {
      // console.log(item)
      this.checkedImgUrl = item.url
    },
    openDialog () {
      this.dialogVisible = true
      // 初始化
      this.checkedImgUrl = null
      this.imageUrl = ''
      this.activeName = 'material'
      this.reqParams.collect = false
    },
    // 获取用户图片素材
    async getUserImg () {
      const { data: { data } } = await userImg(this.reqParams)
      this.total = data.total_count
      this.imgList = data.results
    },
    // 全部和收藏的切换
    changeCollect (cur) {
      this.reqParams.collect = cur
      this.getUserImg()
    },
    // 分页跳转
    changePage (curPage) {
      this.reqParams.page = curPage
      this.getUserImg()
    },
    // 上传图片成功后
    updateSuccess (response) {
      this.imageUrl = response.data.url
      this.$message.success('上传图片成功！')
    }
  }
}
</script>

<style lang="less" scoped>
.coverimg-page {
  display: inline-block;
  width: 160px;
  height: 120px;
  border: 1px dashed #ddd;
  margin: 10px 20px 0 0;

  .surface-plot {
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

// 图片列表样式
.item-list {
  display: flex;
  padding-left: 0;
  flex-wrap: wrap;
  list-style: none;
  .item-img {
    position: relative;
    width: 160px;
    height: 120px;
    margin: 0 15px 15px 0;
    border: 1px dashed #ddd;
    img {
      width: 100%;
      height: 100%;
    }
    &.active::before {
      position: absolute;
      left: 0;
      top: 0;
      content: '';
      display: inline-block;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .4) url('../assets/images/selected.png') no-repeat;
      background-size: 60px;
      background-position: center;
    }
  }
}
</style>
